<template>
  <div id='settings'>
    <div class="title">{{title}}</div>
    <div class="content">
      <div class="type-select">
        <button v-touch-ripple class="type-button" :class="{active:settingTab==1}" type="button" @click="settingTab=1">Breaks</button>
        <button v-touch-ripple class="type-button" :class="{active:settingTab==2}" type="button" @click="settingTab=2">Paid Time Off</button>
        <button v-touch-ripple class="type-button" :class="{active:settingTab==3}" type="button" @click="settingTab=3">Advanced</button>
      </div>

      <div class="setting-content">
        <d-break :show="settingTab == 1"></d-break>
        <!--========================  pto   ==================================================-->
        <d-pto :show="settingTab == 2"></d-pto>
        <!--========================  advance   ==================================================-->
        <d-advance  :show="settingTab == 3"></d-advance>
      </div>
    </div>
<!--=================================================================-->


  </div>
</template>

<script>
  import dAdvance from './settingComponet/advance.vue'
  import dPto from './settingComponet/pto.vue'
  import dBreak from './settingComponet/break.vue'

	export default {
		name: 'TimeAndAttendance',
		components: {
      dAdvance,
      dPto,
      dBreak,
    },
    created(){
			this.init();
    },
    computed:{

    },
    watch:{

    },
		data () {
    	var t = this;
			return {
				title: '',
        settingTab:null,
      }
		},
    methods:{
      init(){
      	this.settingTab = this.$route.query.tab || 1;
      },
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
    @import "src/assets/css/variable.scss";

    #settings{
      >.title{

      }
      >.content{
        margin-top: 60px;
        box-shadow: 0 1px 8px 1px rgba(184, 198, 239, 0.8);
        .type-select{
          margin-top: -77px;
          margin-left: -20px;
          .type-button{
            width: 160px;
            height: 54px;
            margin-right: 10px;
            background-color: #ebf3f7;
            color: #96ACB9;
            border:none;
            border-radius: 3px 3px 0 0;
            outline: none;
            cursor: pointer;
            &.active , &:hover{
              height: 57px;
              background-color: #fff;
              box-shadow: 0 -6px 8px 0 rgba(184,198,239,0.80);
            }
          }
        },
        .setting-content{
          .tip-title{
            line-height: 60px;
            font-size: 14px;
            color: #335570;
          }
          .add-btn-warp{
            .add-btn{
              width: 140px;
              height: 34px;
              margin-bottom: 23px;
              &.marginBottom0{
                margin-bottom: 0;
              }
            }
          }
        }
      }


    }
</style>
